<!--页面主要内容-->
<main class="lyear-layout-content">

    <div class="container-fluid p-t-15">

        <div class="row">

            <div class="col-lg-12">
                <div class="card">
                    <ul class="nav nav-tabs page-tabs pt-2 pl-3 pr-3">
                        <li class="nav-item"> <a class="nav-link active" style="cursor: pointer;">网站配置</a> </li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active">

                            <form method="post" name="edit-form" class="edit-form" enctype="multipart/form-data">
                                {foreach $ConfigList as $item}
                                {if condition="$item.type == 'text'"}
                                <div class="form-group">
                                    <label for="{$item.key}">{$item.title}</label>
                                    <input class="form-control" type="text" id="{$item.key}" name="{$item.key}"
                                        value="{$item.value}" placeholder="请输入站点标题">
                                    <!-- <small class="help-block">调用方式：<code>config('web_site_title')</code></small> -->
                                </div>
                                {elseif condition="$item.type == 'file'"}
                                <div class="form-group">
                                    <label for="{$item.key}">{$item.title}</label>
                                    <div class="input-group" style="display: block;">
                                        <input type="file" class="form-control" name="{$item.key}" id="{$item.key}"
                                            hidden>
                                        <img class="img" width="200"
                                            src="{$item.value ? $item.value : '/static/home/res/images/upload.png'}"
                                            id="img-{$item.key}" />
                                        <div class="input-group-append"><button class="btn btn-default"
                                                onclick="upload('#{$item.key}','.img')" type="button">上传图片</button>
                                        </div>
                                    </div>
                                </div>
                                {/if}
                                {/foreach}



                                <div class="form-group">
                                    <button type="submit" class="btn btn-primary m-r-5">确 定</button>
                                    <!-- <button type="button" class="btn btn-default"
                                        onclick="javascript:history.back(-1);return false;">返 回</button> -->
                                </div>
                            </form>

                        </div>
                    </div>

                </div>
            </div>

        </div>

    </div>

</main>

<script>
    // 图片预览函数
    function GetObjectURL(file) {
        // createObjectURL  给一个文件对象 可以提取出一个url本地地址出来
        var url = null;

        //判断是否为IE浏览器还是google还是其他浏览器
        if (window.createObjectURL != undefined) {
            url = window.createObjectURL(file)
        } else if (window.URL != undefined) {
            url = window.URL.createObjectURL(file)
        } else if (window.webkitURL != undefined) {
            url = window.webkitURL.createObjectURL(file)
        }

        return url
    }

    function upload(elem, img) {
        //点击拉起上传选择
        $(elem).click()

        $(elem).change(function () {
            let file = $(this)[0].files[0] ? $(this)[0].files[0] : {}
            //console.log(file)

            let id = $(this).attr('id')
            let url = GetObjectURL(file)
            let imgArr = $(img)

            for (let item of imgArr) {
                let itemid = $(item).attr('id')

                //console.log(item)
                if ('img-' + id == itemid) {
                    $(item).attr('src', url)
                }
            }
        })
    }
    $();
</script>